<template>
  <dev>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="姓名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="部门">
              <span>{{ props.row.department }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex}}</span>
            </el-form-item>
            <el-form-item label="年龄">
              <span>{{ props.row.age }}</span>
            </el-form-item>
            <el-form-item label="职位">
              <span>{{ props.row.position}}</span>
            </el-form-item>
            <el-form-item label="民族">
              <span>{{ props.row.race}}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="学历">
              <span>{{ props.row.edu}}</span>
            </el-form-item>
            <el-form-item label="加入日期">
              <span>{{ props.row.dateCome }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>
      <el-table-column
        label="部门"
        prop="department">
      </el-table-column>
    </el-table>


    <el-row>
      <el-col :span="6">
        <el-card class="box-card" style="width: 200px;height: 300px">
          <el-button @click="handleUpdate" type="primary">修改头像</el-button><br><br><br>
          <el-button @click="updatePwd" type="primary">修改密码</el-button>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card" style="width: 200px;height: 300px">
          <img :src="avatar" width="80px">
        </el-card>
      </el-col>
    </el-row>


    <el-dialog  :visible.sync="dialoginfo">
      <el-input v-model="temp.avatar" v-if="true"></el-input>
      <el-form ref="dataForm"  :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-upload class="upload-demo" ref="upload" drag action="http://43.138.43.239:8090/imgUpload" multiple
                   :on-success="handleAvatarSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoginfo = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateInfo()">
          提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog  :visible.sync="dialogpwd">
      新密码
      <el-input v-model="temp.pwd"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogpwd = false">
          取消
        </el-button>
        <el-button type="primary" @click="updatePwdinfo()">
          提交
        </el-button>
      </div>
    </el-dialog>






  </dev>

</template>

<script>
import {getById} from '@/api/personnel'
import { mapGetters } from 'vuex'
import request from '@/utils/request'
export default {
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'personnelId',
      'avatar',
      'department'
    ])
  },
  data() {
    return {
      id:'',
      tableData: [{
        id:'',
        name: '',
        phone:''
      }],
      temp:{
        id:'',
        avatar:null
      },
      dialoginfo:false,
      dialogpwd:false
    }
  },
  created() {
    console.log(this.name)
    this.id=this.personnelId
    this.tableData[0].name=this.name
    this.tableData[0].id=this.personnelId
    this.tableData[0].department=this.department
    this.temp.personnelId=this.personnelId
    this.findInfo()
  },
  methods:{
    handleAvatarSuccess(res, file){
      console.log(res);
      this.temp.avatar = res;
    },
    findInfo(){
        getById(this.id).then(res=>{
          this.tableData=res.data
          this.tableData[0].name=this.name
          this.tableData[0].id=this.personnelId
          this.tableData[0].department=this.department
        })

    },
    handleUpdate(row) {
      this.temp ={}
      this.temp.username=this.name
      this.dialoginfo = true
    },
    updateInfo(){
      request({
        url:'/upava',
        methods: 'get',
        params:this.temp
      }).then(res=>{
        this.dialoginfo = false
      })


    },
    updatePwd(){
      this.temp ={}
      this.temp.username=this.name
      this.dialogpwd = true
    },
    updatePwdinfo(){
        request({
          url:'/uppwd',
          methods: 'get',
          params:this.temp
        }).then(res=>{
          this.dialogpwd = false
        })
    }
  }
}
</script>



<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
